<template>
    <view>
        <nav-bar backState="2000" :titleCenter="false">
            <view class="search_box" @click="onPageJump('/pages/home/search')">
                <text class="icon_search"></text>
                <text class="tips">搜索</text>
            </view>
        </nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <view class="classify_content_box">
            <scroll-view class="type_scroll" scroll-y="true">
                <view class="type_box">
                    <view v-for="(item,index) of classifyList" :key="index" :class="{active:index == classifyIndex}"
                        @click="onClassify(index)">{{item.name}}</view>
                </view>
            </scroll-view>
            <scroll-view class="goods_type_scroll" scroll-y="true" @scrolltolower="loadData()">
                <view class="goods_type_box">
                    <view class="title" v-if="classifyList.length > 1">{{classifyList[classifyIndex].name}}</view>
                    <view class="goods_type_list_box">
                        <view class="goods_type_list" v-for="(item,index) of classifyDataList" :key="index" @click="onClassifyJump(item)">
                            <image :src="item.iconUrl" mode="aspectFit"></image>
                            <text>{{item.name}}</text>
                        </view>
                    </view>
                </view>
                <view class="good_item" v-for="(item,index) of goodsDataList" :key="index" @click="onPageJump('/pages/home/shop/goodsDetail?objId=' + item.objId)">
                    <image :src="item.img" mode="aspectFill"></image>
                    <view class="good_info">
                        <view class="title">{{ item.name }}</view>
                        <view class="price_box">
                            <text>{{ item.priceDiscount }}</text>
                            <text>{{ item.priceShop }}</text>
                        </view>
                        <view class="buy">购买</view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                classifyList: [],
                classifyIndex: 0,
                classifyDataList: [],
                pageNo: 1,
                pages: 1,
                goodsDataList: [],
            };
        },
        //第一次加载
        onLoad(e) {
            this.pageData();
        },
        //页面显示
        onShow() {},
        //方法
        methods: {
            onClassify(index) {
                this.classifyIndex = index;
                const item = this.classifyList[index];
                this.getClassifyData(item.objId);
                this.pageNo = 1;
                this.pages = 1;
                this.loadData();
            },
            onPageJump(url) {
                uni.navigateTo({
                    url: url
                });
            },
            onClassifyJump(item) {
                uni.navigateTo({
                    url: "/pages/home/shop/goodsList?typeId=" + item.objId + "&title=" + item.name
                });
            },
            pageData() {
                this.$http
                    .get('api/mall/goods/v1/type', {
                        type: 1401
                    })
                    .then(res => {
                        this.classifyList = res;
                        this.getClassifyData(res[0].objId);
                        this.pageNo = 1;
                        this.pages = 1;
                        this.loadData();
                    });
            },
            getClassifyData(pid) {
                this.$http
                    .get('api/mall/goods/v1/type', {
                        type: 1401,
                        pid: pid
                    })
                    .then(res => {
                        this.classifyDataList = res;
                    });
            },
            loadData(){
                if (this.pageNo <= this.pages) {
                	let httpData = {
                		pageNo: this.pageNo,
                		pageSize: 15,
                	};
                    const item = this.classifyList[this.classifyIndex];
                	if(item.objId){
                		httpData.typeId = item.objId;
                	}
                	this.$http
                		.post(
                			'api/mall/goods/v1/list',httpData,
                			{
                				load: false
                			}
                		)
                		.then(res => {
                			uni.stopPullDownRefresh();
                			this.pages = res.pages;
                			if (this.pageNo == 1) {
                				this.goodsDataList = res.data;
                			} else {
                				this.goodsDataList = this.goodsDataList.concat(res.data);
                			}
                			if (res.data.length > 0) {
                				this.pageNo = this.pageNo + 1;
                			}
                		});
                }
            }
        },
        //页面隐藏
        onHide() {},
        //页面卸载
        onUnload() {},
        //页面下来刷新
        onPullDownRefresh() {},
        //页面上拉触底
        onReachBottom() {},
        //用户点击分享
        onShareAppMessage(e) {
            return this.wxShare();
        }
    };
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';
page{
	background-color: #f7f7f7;
}
    .search_box {
        width: 690rpx;
        height: 58rpx;
        background-color: rgba(229, 229, 229, 0.5);
        border-radius: 32rpx;
        /* #ifdef MP */
        margin-right: 15rpx;
        /* #endif */
        display: flex;
        align-items: center;
		justify-content: center; 
        padding: 0 40rpx;

        .tips {
            font-size: 30rpx;
            color: rgba(204, 204, 204, 1);
        }

        .icon_search {
            @include bis('../../static/icon/ic_search.png');
            width: 29rpx;
            height: 28rpx;
            margin-right: 20rpx;
        }
    }

    .classify_content_box {
        /* #ifdef H5 */
        height: calc(100vh - var(--status-bar-height) - 188rpx);
        /* #endif */
        /* #ifndef H5 */
        height: calc(100vh - var(--status-bar-height) - 88rpx);
        /* #endif */
        display: flex;

        .type_scroll {
            height: 100%;
            width: 180rpx;
            flex-shrink: 0;
            background-color: #f6f6f6;

            view {
                text-align: center;
                line-height: 100rpx;
                height: 100rpx;
                font-size: 28rpx;
                color: #848484;

                &.active {
                    background-color: $themeColor;
                    color: #FFF;
                }
            }
        }

        .goods_type_scroll {
            height: 100%;
            flex: 1;

            .goods_type_box {
                // margin: 30rpx 20rpx;
                background-color: #FFF;

                .title {
                    padding: 30rpx 30rpx;
                    font-size: 28rpx;
                    color: #333333;
					font-weight: bold;
                }

                .goods_type_list_box {
                    display: flex;
                    flex-wrap: wrap;
                    padding-bottom: 10rpx;

                    .goods_type_list {
                        width: 33.333%;
                        //height: 170rpx;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        background-color: #FFF;
                        margin-bottom: 22rpx;
                        border-radius: 8rpx;

                        &:nth-child(3n) {
                            margin-right: 0;
                        }

                        image {
                            width: 130rpx;
                            height: 130rpx;

                        }

                        text {
                            font-size: 24rpx;
                            color: #333333;
                            margin-top: 20rpx;
                        }
                    }
                }
            }
        }
        .good_item {
            margin-top: 12rpx;
            background-color: #FFF;
            padding: 24rpx;
            display: flex;
            image {
                width: 160rpx;
                height: 160rpx;
                flex-shrink: 0;
            }
            .good_info {
                margin-left: 24rpx;
                width: calc(100% - 184rpx);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .title {
                    font-size: 28rpx;
                    color: #333333;
                    @include bov(2);
                }
                .price_box {
                    display: flex;
                    text {
                        font-size: 24rpx;
                        &:nth-child(1){
                            color: #ff403f;
                        }
                        &:nth-child(2){
                            color: #cccccc;
                            text-decoration: line-through;
                            margin-left: 20rpx;
                        }
                    }
                }
                .buy {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    font-size: 24rpx;
                    color: #333333;
                    &::after {
                        content: "";
                        @include bis("../../static/icon/ic_to.png");
                        width: 10rpx;
                        height: 20rpx;
                        margin-left: 20rpx;
                    }
                }
            }
        }
    }
</style>
